<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10408082") }}
    </PageTitle>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.title"
            maxlength="256"
            :placeholder="$t('system.maintenance_notice.title')"
            clearable
            @blur="() => (dataForm.title = dataForm.title.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('system.maintenance_notice.status')"
          >
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.type"
            clearable
            :placeholder="$t('system.maintenance_notice.type')"
          >
            <el-option
              v-for="item in typeArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="getDataList((pageNo = 1))">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="isAuth('10408082.MANAGE')"
            type="primary"
            class="w-8"
            @click="createMaintenacceNotice"
          >
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>

        <!--        <el-form-item style="float: right">
                  <el-button
                    style="border: none"
                    type="primary"
                    class="p-2"
                    size="medium"
                  >
                    <table-column-filter
                      :list="settingList"
                      :default-setting="defaultSettings"
                      v-model:settings="settings"
                      domain="operator.contact"
                    />
                  </el-button>
                </el-form-item>-->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column prop="title" :label="$t('system.maintenance_notice.title')">
          <template v-slot="scope">
            <div
              style="cursor: pointer"
              @click="showDetailHandle(scope.row.maintencanceId)"
            >
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          width="140px"
          :label="$t('system.maintenance_notice.type')"
        >
          <template v-slot="scope">
            <!--            <el-tag v-if="scope.row.type === 1" size="small" type="success">
              {{ $t('system.maintenance_notice.type_list.new_version') }}
            </el-tag>
            <el-tag v-if="scope.row.type === 2" size="small" type="primary">
              {{ $t('system.maintenance_notice.type_list.shutdown') }}
            </el-tag>-->
            <el-tag size="small">
              {{ typeFilter(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="170px"
          :label="$t('system.maintenance_notice.maintenance_time')"
        >
          <template v-slot="scope">
            <div>
              {{ scope.row.beginTime }}
            </div>
            <div>
              {{ scope.row.endTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          width="170px"
          :label="$t('system.maintenance_notice.status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t("system.maintenance_notice.status_list.inte_message_wait_notice") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small" type="success">
              {{ $t("system.maintenance_notice.status_list.notice_complete") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 2" size="small" type="info">
              {{ $t("system.maintenance_notice.status_list.email_wait_notice") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 3" size="small" type="danger">
              {{ $t("system.maintenance_notice.status_list.inte_message_unknown") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 4" size="small" type="danger">
              {{ $t("system.maintenance_notice.status_list.email_unknown") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="noticeChannel"
          width="170px"
          :label="$t('system.maintenance_notice.notice_channel')"
        >
          <template v-slot="scope">
            <el-tag size="small">
              {{ channelFilter(scope.row.noticeChannel) }}
            </el-tag>
            <!--            <el-tag v-if="scope.row.noticeChannel === 0" size="small" type="primary">
              {{ channelFilter(scope.row.noticeChannel) }}
            </el-tag>
            <el-tag v-if="scope.row.noticeChannel === 1" size="small" type="success">
              {{ channelFilter(scope.row.noticeChannel) }}
            </el-tag>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="creTime"
          key="creTime"
          width="170px"
          min-width="100"
          :label="$t('common.createTime')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? "" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          
          <template v-slot="scope">
            <div :title="$t('system.maintenance_notice.content')"><el-button @click="showDetailHandle(scope.row.maintencanceId)" text class="w-8"><svg-icon icon-class="View" /></el-button></div>
            <!-- <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showDetailHandle(scope.row.maintencanceId)">
                    <svg-icon icon-class="InfoFilled" />
                    {{ $t("system.maintenance_notice.content") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="$t('system.maintenance_notice.content')"
              placement="top"
            >
              <el-button
                style="color: #8c939d"
                type="text"
                @click="showDetailHandle(scope.row.maintencanceId)"
              >
                <i class="el-icon-info"></i>
              </el-button>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      v-model="maintenanceNoticeAddVisible"
      :title="$t('system.maintenance_notice.maintenance_notice_add_tip')"
      width="600px"
      @close="cancel"
    >
      <el-form ref="editForm" :rules="rules" :model="form" label-position="top">
        <el-form-item :label="$t('system.maintenance_notice.type')" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">{{
              $t("system.maintenance_notice.type_list.new_version")
            }}</el-radio>
            <el-radio :label="2">{{
              $t("system.maintenance_notice.type_list.shutdown")
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('system.maintenance_notice.notice_channel')"
          prop="noticeChannel"
        >
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('system.maintenance_notice.email_send_time_tip')"
            placement="top-start"
          >
            <el-checkbox v-model="channelEmail"
              >{{ $t("system.maintenance_notice.notice_channel_list.email") }}
            </el-checkbox>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('system.maintenance_notice.intemessage_send_time_tip')"
            placement="top-start"
          >
            <el-checkbox v-model="channelInteMessage" disabled>
              {{ $t("system.maintenance_notice.notice_channel_list.intemessage") }}
            </el-checkbox>
          </el-tooltip>
        </el-form-item>
        <el-form-item :label="$t('system.maintenance_notice.template')">
          <el-tag
            v-for="tag in tagsList"
            :key="tag.code"
            size="small"
            @click="campaignFormatChar(tag)"
            style="cursor: pointer; margin-right: 10px"
            >{{ tag.text }}
          </el-tag>
        </el-form-item>
        <el-form-item :label="$t('system.maintenance_notice.title')" prop="title">
          <el-input
            v-model="form.title"
            maxlength="128"
            show-word-limit
            clearable
            @blur="() => (form.title = form.title.trim())"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system.maintenance_notice.maintenance_time')"
          prop="maintenanceTime"
        >
          <el-date-picker
            v-model="maintenanceTime"
            type="datetimerange"
            value-format="timestamp"
            :start-placeholder="$t('common.start_time')"
            :end-placeholder="$t('common.end_time')"
            @change="maintenanceTimeChange"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <!--        <el-form-item :label="$t('system.maintenance_notice.content_zh')" prop="contentZh">-->
        <!--          <span style="margin-left: 10px; color: red" v-show="!dateTimeDisabled">-->
        <!--              {{ $t('system.maintenance_notice.maintenancetime_not_null_tip') }}-->
        <!--          </span>-->
        <!--          <div v-show="dateTimeDisabled">-->
        <!--            <editor-->
        <!--              id="editor1"-->
        <!--              ref="editor1"-->
        <!--              v-model="form.contentZh"-->
        <!--              :init="initSettingsZh"-->
        <!--              api-key="xh4l63wuozj4rj6egkgwqq8l6c8w6itj0xbsjnun8s426zzu"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </el-form-item>-->
        <el-form-item
          :label="$t('system.maintenance_notice.content_en')"
          prop="contentEn"
        >
          <!--          <span style="margin-left: 10px; color: red" v-show="!dateTimeDisabled">
              {{ $t('system.maintenance_notice.maintenancetime_not_null_tip') }}
          </span>-->
          <div>
            <!-- TODO:tinymce有问题 -->
            <!-- <editor
              id="editor2"
              ref="editor2"
              v-model="form.contentEn"
              :init="initSettingsEn"
              api-key="xh4l63wuozj4rj6egkgwqq8l6c8w6itj0xbsjnun8s426zzu"
            /> -->
          </div>
        </el-form-item>
        <!--        <el-form-item :label="$t('system.maintenance_notice.content_pt')" prop="contentPt">-->
        <!--          <span style="margin-left: 10px; color: red" v-show="!dateTimeDisabled">-->
        <!--              {{ $t('system.maintenance_notice.maintenancetime_not_null_tip') }}-->
        <!--          </span>-->
        <!--          <div v-show="dateTimeDisabled">-->
        <!--            <editor-->
        <!--              id="editor3"-->
        <!--              ref="editor3"-->
        <!--              v-model="form.contentPt"-->
        <!--              :init="initSettingsPt"-->
        <!--              api-key="xh4l63wuozj4rj6egkgwqq8l6c8w6itj0xbsjnun8s426zzu"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item :label="$t('system.maintenance_notice.content_ja')" prop="contentJa">-->
        <!--          <span style="margin-left: 10px; color: red" v-show="!dateTimeDisabled">-->
        <!--              {{ $t('system.maintenance_notice.maintenancetime_not_null_tip') }}-->
        <!--          </span>-->
        <!--          <div v-show="dateTimeDisabled">-->
        <!--            <editor-->
        <!--              id="editor4"-->
        <!--              ref="editor4"-->
        <!--              v-model="form.contentJa"-->
        <!--              :init="initSettingsJa"-->
        <!--              api-key="xh4l63wuozj4rj6egkgwqq8l6c8w6itj0xbsjnun8s426zzu"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button text @click="cancel">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" :loading="dataListLoading" @click="submit()">{{
            $t("system.maintenance_notice.bt_send")
          }}</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :title="$t('system.maintenance_notice.maintenance_notice_connent_tip')"
      width="50%"
      v-model="showContent"
      @close="closeShowContent"
    >
      <div style="margin: 10px 20px">
        <div class="flex justify-center items-center mb-3" style="margin-top: 10px">
          <span style="font-size: 18px; color: #2569c3">{{
            maintenanceNotice.title
          }}</span>
        </div>
        <div class="flex justify-center items-center mb-3" style="margin-top: 10px">
          <span style="font-size: 14px; color: grey; text-align: center"
            >{{ "Time: " }}{{ maintenanceNotice.creTime }}</span
          >
        </div>
        <div style="padding: 0 20px 20px 20px">
          <div
            style="line-height: 1.8em; color: black; font-size: 16px"
            v-html="maintenanceNotice.content"
          ></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters/index'
import Editor from '/public/static/tinymce-vue'
// import TableColumnFilter from '@/components/page-setting/table-column-filter'

import { formatDate, formatEnDate } from '@/utils/formatDate'
import {
  addMaintenanceNotice,
  deleteOperator,
  getMaintenanceNoticeById,
  getMaintenanceNoticePage
} from '@/api'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  components: {
    // TableColumnFilter
    editor: Editor,
    PageTitle
  },
  data() {
    return {
      settings: {
        conditions: [],
        columns: []
      },
      dataForm: {
        title: '',
        status: null,
        type: null,
        noticeChannel: 0
      },
      channelEmail: false,
      channelInteMessage: true,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      maintenanceNoticeAddVisible: false,
      maintenanceTime: [],
      form: {
        title: '',
        maintenanceTime: [],
        noticeChannel: 0,
        type: null,
        beginTime: null,
        endTime: null,
        contentEn: '',
        contentZh: '',
        contentJa: '',
        contentPt: '',
        remark: ''
      },
      dateTimeDisabled: false,
      showContent: false,
      maintenanceNotice: {},
      initSettings: {
        height: 300,
        menubar: false,
        plugins: 'wordcount',
        content_style:
          'button {color: #409eff; border: 0 none;background: none;cursor: text;padding: 0;vertical-align: baseline;display: inline-block;font-size: 1em;overflow: visible;text-align: left;}'
      },
      initSettingsZh: {
        height: 300,
        menubar: false,
        plugins: 'wordcount',
        content_style:
          'button {color: #409eff; border: 0 none;background: none;cursor: text;padding: 0;vertical-align: baseline;display: inline-block;font-size: 1em;overflow: visible;text-align: left;}'
      },
      initSettingsEn: {
        height: 300,
        menubar: false,
        plugins: '',
        content_style:
          'button {color: #409eff; border: 0 none;background: none;cursor: text;padding: 0;vertical-align: baseline;display: inline-block;font-size: 1em;overflow: visible;text-align: left;}'
      },
      initSettingsPt: {
        height: 300,
        menubar: false,
        plugins: 'wordcount',
        content_style:
          'button {color: #409eff; border: 0 none;background: none;cursor: text;padding: 0;vertical-align: baseline;display: inline-block;font-size: 1em;overflow: visible;text-align: left;}'
      },
      initSettingsJa: {
        height: 300,
        menubar: false,
        plugins: 'wordcount',
        content_style:
          'button {color: #409eff; border: 0 none;background: none;cursor: text;padding: 0;vertical-align: baseline;display: inline-block;font-size: 1em;overflow: visible;text-align: left;}'
      }
    }
  },
  computed: {
    tagsList() {
      return [
        {
          code_en:
            '<p>Dear Customer,</p><p>In order to provide you with better service, we will be performing maintenance on TOMS. During the maintenance, the system will be temporarily unavailable.</p><p>Maintenance time:  (${timeZone})<strong><span> ${beginDateTime} </span></strong><span><strong> ~ ${endDateTime} </strong></span></p><p>We apologize for any inconvenience this may cause and appreciate your understanding. If you have any questions, please feel free to contact our customer support team. Thank you for your understanding!</p>',
          code_title: 'TOMS Maintenance Notification',
          code_zh:
            '<p>尊敬的用户:</p><p>&nbsp; 为了给您提供更好的服务，我们将对[TOMS]进行维护。在维护期间，系统将暂停服务。</p><p>&nbsp; 维护时间：<strong><span style="text-decoration: underline;">' +
            formatEnDate(this.form.beginTime) +
            '</span></strong>至<span style="text-decoration: underline;"><strong>' +
            formatEnDate(this.form.endTime) +
            '</strong></span></p><p>&nbsp; 我们对此次维护给您带来的不便表示歉意，如果您有任何问题，请随时联系我们的客户支持团队。感谢您的理解与支持！</p>',
          code_pt:
            '<p>Prezado Usu&aacute;rio:</p><p>&nbsp; Para oferecer um melhor servi&ccedil;o, realizaremos uma manuten&ccedil;&atilde;o no TOMS. Durante a manuten&ccedil;&atilde;o, o sistema ficar&aacute; temporariamente indispon&iacute;vel.</p><p>&nbsp; Hor&aacute;rio da manuten&ccedil;&atilde;o: <strong><span style="text-decoration: underline;">' +
            formatEnDate(this.form.beginTime) +
            '</span></strong>~<span style="text-decoration: underline;"><strong>' +
            formatEnDate(this.form.endTime) +
            '</strong></span></p><p>&nbsp; Pedimos desculpas por qualquer inconveniente que isso possa causar e agradecemos sua compreens&atilde;o. Se voc&ecirc; tiver alguma d&uacute;vida, n&atilde;o hesite em entrar em contato com nossa equipe de suporte ao cliente. Agradecemos seu apoio!</p>',
          code_ja:
            '<p>拝啓、ユーザー様:</p><p>&nbsp; より良いサービスを提供するために、[TOMS]のメンテナンスを実施いたします。メンテナンス中は、システムが一時的に利用できなくなります。</p><p>&nbsp; メンテナンス時間：<strong><span style="text-decoration: underline;">' +
            formatEnDate(this.form.beginTime) +
            '</span></strong>~<span style="text-decoration: underline;"><strong>' +
            formatEnDate(this.form.endTime) +
            '</strong></span></p><p>&nbsp; このメンテナンスによるご不便をお詫び申し上げます。ご質問がございましたら、お気軽にお問い合わせください。ご理解とご協力に感謝いたします。</p>',
          text: this.$t('system.maintenance_notice.notification_template')
        },
        {
          code_en:
            '<p>Dear User:</p><p>We are happy to inform you that [TOMS] has successfully completed system maintenance !</p><p>If you encounter any problems during use, please feel free to contact our customer support team. Thank you for your continued support !</p>',
          code_title: 'TOMS Maintenance Completion Notification',
          code_zh:
            '<p>亲爱的用户：</p><p>&nbsp; 我们很高兴地通知您，[TOMS]已成功完成了系统维护！</p><p>&nbsp; 如果在使用过程中遇到任何问题，欢迎随时联系我们的客户支持团队。谢谢您一直以来的支持！</p>',
          code_pt:
            '<p>Querido Usu&aacute;rio:</p><p>&nbsp; Temos o prazer de informar que [TOMS] concluiu com sucesso a atualiza&ccedil;&atilde;o do sistema!</p><p>&nbsp; Se voc&ecirc; encontrar algum problema durante o uso, sinta-se &agrave; vontade para entrar em contato com nossa equipe de suporte ao cliente. Obrigado por seu apoio cont&iacute;nuo!</p>',
          code_ja:
            '<p>ユーザーの皆様:</p><p>&nbsp; [TOMS] のシステム アップグレードが無事完了したことをお知らせいたします。</p><p>&nbsp; 使用中に問題が発生した場合は、お気軽にカスタマーサポートチームにご連絡ください。 今後ともよろしくお願いいたします。</p>',
          text: this.$t(
            'system.maintenance_notice.notification_completion_template'
          )
        }
      ]
    },
    statusArray() {
      return [
        {
          label: this.$t(
            'system.maintenance_notice.status_list.inte_message_wait_notice'
          ),
          value: 0
        },
        {
          label: this.$t(
            'system.maintenance_notice.status_list.notice_complete'
          ),
          value: 1
        },
        {
          label: this.$t(
            'system.maintenance_notice.status_list.email_wait_notice'
          ),
          value: 2
        },
        {
          label: this.$t(
            'system.maintenance_notice.status_list.inte_message_unknown'
          ),
          value: 3
        },
        {
          label: this.$t('system.maintenance_notice.status_list.email_unknown'),
          value: 4
        }
      ]
    },
    typeArray() {
      return [
        {
          label: this.$t('system.maintenance_notice.type_list.new_version'),
          value: 1
        },
        {
          label: this.$t('system.maintenance_notice.type_list.shutdown'),
          value: 2
        }
      ]
    },
    rules() {
      return {
        title: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.title_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ],
        maintenanceTime: [
          {
            required: true,
            message: this.$t(
              'system.maintenance_notice.maintenancetime_not_null_tip'
            ),
            trigger: ['change']
          }
        ],
        contentEn: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.content_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ],
        contentZh: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.content_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ],
        contentJa: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.content_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ],
        contentPt: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.content_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ],
        type: [
          {
            required: true,
            message: this.$t('system.maintenance_notice.type_not_null_tip'),
            trigger: ['blur', 'change']
          }
        ]
      }
    },

    settingList() {
      return {
        conditions: [
          {
            title: this.$t('contact.content'),
            code: 'content'
          },
          {
            title: this.$t('contact.role'),
            code: 'role'
          },
          {
            title: this.$t('contact.status'),
            code: 'status'
          },
          {
            title: this.$t('contact.remark'),
            code: 'remark'
          }
        ],

        columns: [
          {
            title: this.$t('contact.country_or_region'),
            code: 'country'
          },
          {
            title: this.$t('contact.content'),
            code: 'content'
          },
          {
            title: this.$t('contact.status'),
            code: 'status'
          },
          {
            title: this.$t('contact.role'),
            code: 'role'
          },
          {
            title: this.$t('common.createTime'),
            code: 'createTime'
          },
          {
            title: this.$t('contact.handling_time'),
            code: 'handling_time'
          }
        ]
      }
    },
    defaultSettings() {
      return {
        conditions: [],
        columns: []
      }
    }
  },
  mounted() {
    this.init()
    tinymce.init({})
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    handleBlur() {
      console.log('Editor blurred:', this.content)
    },
    statusFilter(status) {
      const statusMap = {
        0: this.$t(
          'system.maintenance_notice.status_list.inte_message_wait_notice'
        ),
        1: this.$t('system.maintenance_notice.status_list.notice_complete'),
        2: this.$t('system.maintenance_notice.status_list.email_wait_notice'),
        3: this.$t(
          'system.maintenance_notice.status_list.inte_message_unknown'
        ),
        4: this.$t('system.maintenance_notice.status_list.email_unknown')
      }
      return statusMap[status]
    },
    typeFilter(type) {
      const typeMap = {
        1: this.$t('system.maintenance_notice.type_list.new_version'),
        2: this.$t('system.maintenance_notice.type_list.shutdown')
      }
      return typeMap[type]
    },
    channelFilter(noticeChannel) {
      const channelMap = {
        0: this.$t('system.maintenance_notice.notice_channel_list.intemessage'),
        1: this.$t(
          'system.maintenance_notice.notice_channel_list.intemessage_and_email'
        )
      }
      return channelMap[noticeChannel]
    },
    async init() {
      await this.getDataList()
    },
    showHeader(label) {
      let list = this.settings['columns']
      return list ? list.includes(label) : false
    },
    showFormItem(label) {
      let list = this.settings['conditions']
      return list ? list.includes(label) : false
    },
    getDataList() {
      console.log(JSON.stringify(this.dataForm))
      this.dataListLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        type: this.dataForm.type,
        title: this.dataForm.title
      }
      getMaintenanceNoticePage(params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
          for (let i = 0; i < data.data.length; i++) {
            this.dataList[i].creTime = formatDate(
              data.data[i].creTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
            this.dataList[i].updTime = formatDate(
              data.data[i].updTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
            this.dataList[i].beginTime = formatDate(
              data.data[i].beginTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
            this.dataList[i].endTime = formatDate(
              data.data[i].endTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
          }
        })
        .catch((e) => {
          this.dataListLoading = false
          this.$confirmError(e)
          // this.$message.error(e.message)
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    resetDatePicker() {
      this.form.content = ''
      this.form.beginTime = null
      this.form.endTime = null
      this.maintenanceTime = null
      this.dateTimeDisabled = false
    },
    maintenanceTimeChange() {
      if (this.maintenanceTime !== null) {
        this.form.beginTime = this.maintenanceTime[0] / 1000
        this.form.endTime = this.maintenanceTime[1] / 1000
        const timestampSeconds = Math.floor(Date.now() / 1000)
        if (this.form.beginTime < timestampSeconds) {
          this.form.beginTime = null
          this.form.endTime = null
          this.maintenanceTime = null
          return this.$message.error(
            this.$t('system.maintenance_notice.maintenancetime_tip')
          )
        }
      } else {
        this.form.beginTime = null
        this.form.endTime = null
      }
      this.dateTimeDisabled = true
      this.form.maintenanceTime = this.maintenanceTime
      console.log(this.maintenanceTime)
    },
    showDetailHandle(maintencanceId) {
      getMaintenanceNoticeById(maintencanceId)
        .then((data) => {
          this.maintenanceNotice = data
          this.maintenanceNotice.creTime = formatDate(
            this.maintenanceNotice.creTime,
            'YYYY/MM/DD  HH:mm:ss'
          )
          // let beginTime = formatEnDate()
          // let endTime = formatEnDate()
          let content = this.maintenanceNotice.content
          let s = content.replace(
            '${beginDateTime}',
            this.maintenanceNotice.beginTime
          )
          let s2 = s.replace('${endDateTime}', this.maintenanceNotice.endTime)
          this.maintenanceNotice.content = s2
        })
        .catch((e) => {
          this.$confirmError(e)
        })
      this.showContent = true
    },
    closeShowContent() {
      this.showContent = false
    },
    cancel() {
      // this.$emit("close");
      this.maintenanceNoticeAddVisible = false
    },
    submit() {
      console.log(this.maintenanceTime)
      console.log(JSON.stringify(this.form))
      if (this.channelEmail) {
        this.form.noticeChannel = 1
      } else {
        this.form.noticeChannel = 0
      }
      if (this.form.beginTime == null || this.form.endTime == null) {
        return this.$message.error(
          this.$t('system.maintenance_notice.maintenancetime_not_null_tip')
        )
      }

      if (this.form.contentEn !== '' && this.form.contentEn.length > 1024) {
        return this.$message.error(
          this.$t('system.maintenance_notice.content_lenght_tip', {
            lenght: this.form.contentEn.length
          })
        )
      }

      // if (this.form.contentZh !== '' && this.form.contentZh > 1024) {
      //   return this.$message.error(this.$t('system.maintenance_notice.content_lenght_tip'))
      // }
      //
      // if (this.form.contentPt !== '' && this.form.contentPt > 1024) {
      //   return this.$message.error(this.$t('system.maintenance_notice.content_lenght_tip'))
      // }
      //
      // if (this.form.contentJa !== '' && this.form.contentJa > 1024) {
      //   return this.$message.error(this.$t('system.maintenance_notice.content_lenght_tip'))
      // }

      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.$confirm(this.$t('system.maintenance_notice.send_tip_one'), '', {
            confirmButtonText: this.$t('common.confirm'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.$confirm(
              this.$t('system.maintenance_notice.send_tip_two'),
              '',
              {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
                type: 'warning'
              }
            ).then(() => {
              this.dataListLoading = true
              addMaintenanceNotice(this.form)
                .then((data) => {
                  this.dataListLoading = false
                  this.maintenanceNoticeAddVisible = false
                  this.getDataList()
                })
                .catch((e) => {
                  this.dataListLoading = false
                  this.$confirmError(e)
                  console.log(`err:${JSON.stringify(e)}`)
                })
            })
          })
        }
      })
    },
    createMaintenacceNotice() {
      const timezoneOffset = new Date().getTimezoneOffset()
      const targetOffset = -8 * 60 // 将UTC+8:00转换为分钟差
      const utcDate = new Date(
        Date.now() + (targetOffset - timezoneOffset) * 60 * 1000
      )
      // 将当前时间加上指定UTC时区的分钟差转为UTC时间
      this.maintenanceNoticeAddVisible = true
      this.dateTimeDisabled = false
      this.resetForm('editForm')
    },
    resetForm(formName) {
      this.form.endTime = null
      this.form.beginTime = null
      this.form.title = null
      this.channelEmail = false
      this.maintenanceTime = null
      // this.$nextTick(() => {
      //   this.$refs[formName].resetFields();
      // });
    },
    campaignFormatChar(tab) {
      /* tinymce.execCommand(
        'mceInsertContent',
        false,
        `<div>${val.code}</div>`
        // `<div contenteditable="false">${val}</div>`
      )
      const content = tinymce.get('editor').getContent() */
      // this.form.contentZh = tab.code_zh
      this.form.contentEn = tab.code_en
      this.form.title = tab.code_title
      // this.form.contentPt = tab.code_pt
      // this.form.contentJa = tab.code_ja
    }
  }
}
</script>
<style lang="scss" scope>
pre {
  white-space: normal;
}
</style>
